<template>
	<view class="list">
		<view class="viewport">
			<!-- tabs -->
			<view class="tabs">
				<text class="item" v-for="(item, index) in orderTabs" :key="item.title" @tap="activeIndex = index">  {{ item.title }} </text>
				<!-- 游标 -->
				<view class="cursor" :style="{ left: (activeIndex * 20 + 2) + '%' }"></view>
			</view>
			<!-- 滑动容器 -->
			<swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
				<!-- 滑动项 -->
				<swiper-item v-for="item in orderTabs" :key="item.title">
					<!-- 订单列表 -->
					<OrderList :order-state="item.orderState" />
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import OrderList from './components/OrderList.vue'
	export default {
		components: {
			OrderList
		},
		data() {
			return {
				safeAreaInsets: {},
				// tabs 数据
				orderTabs: [{
						orderState: 0,
						title: '全部'
					},
					{
						orderState: 1,
						title: '待付款'
					},
					{
						orderState: 2,
						title: '待发货'
					},
					{
						orderState: 3,
						title: '待收货'
					},
					{
						orderState: 4,
						title: '待评价'
					},
				],
				// 页面参数
				pageType: '',
				activeIndex: 0,
			}
		},
		onLoad(option) {
			// 获取屏幕边界到安全区域距离
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets
			this.pageType = option.type
			this.activeIndex = this.orderTabs.findIndex(v => v.orderState == Number(option.type))
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.viewport {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	// tabs
	.tabs {
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		margin: 0 10rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
		position: relative;
		z-index: 9;

		.item {
			flex: 1;
			text-align: center;
			padding: 20rpx;
			font-size: 28rpx;
			color: #262626;
		}

		.cursor {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 30rpx;
			height: 6rpx;
			padding: 0 50rpx;
			background-color: #27ba9b;
			/* 过渡效果 */
			transition: all 0.4s;
		}
	}

	// swiper
	.swiper {
		background-color: #f7f7f8;
	}

</style>